﻿@model MvcApplication1.Models.User.LogIn
@{
    Layout = null;
}

@{
    var Users = (Dictionary<String, MvcApplication1.Domain.User>)ViewBag.Users;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }
    </style>
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand" href="#">Project name</a>
                <div class="nav-collapse collapse">
                    <p class="navbar-text pull-right">
                        @{ MvcApplication1.Models.User.LogIn user = (MvcApplication1.Models.User.LogIn)HttpContext.Current.Session["UserModel"]; }
                        Logged in as
                        @{if (user != null)
                        {
                            @user.UserName
                        }


                        }

                    </p>
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="@Url.Action("Logout", "Login")">Log Out</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Kabin</li>
                        <li><a href="@Url.Action("", "Kabin1")">Kabin 1 - 1</a></li>
                        <li><a href="@Url.Action("", "Kabin2")">Kabin 1 - 2</a></li>
                        <li class="nav-header">Kokpit</li>
                        <li><a href="@Url.Action("", "Kokpit1")">Kokpit 1 - 1</a></li>
                    </ul>
                </div><!--/.well -->

                <button type="button" id="start" class="btn btn-primary" data-loading-text="start">start</button>

            </div><!--/span-->
            <div class="span9">
                <div class="hero-unit">
                    <div class="row-fluid">
                        <div style="text-align:left; width: 320px; height:240px;">
                            <video id="localVideo" autoplay width="320" height="240">Henüz kendi görüntünüzü başlatmadınız.</video>
                        </div><!--/span-->
                        <div style="text-align:right; width: 320px; height:240px;">
                            <video id="remoteVideo" autoplay width="320" height="240">Henüz diğer taraftan görüntü alınmıyor.</video>
                        </div><!--/span-->
                    </div><!--/row-->
                </div>
            </div><!--/span-->
        </div><!--/row-->


        <hr>

        <footer>
            <p>&copy; Company 2013</p>
        </footer>

    </div><!--/.fluid-container-->
    <!-- set up the modal to start hidden and fade in and out -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body…</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="Scripts/jquery-2.1.0.js"></script>
    <script src="Scripts/XSockets.latest.js"></script>
    <script src="Scripts/XSockets.WebRTC.latest.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="~/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script src="~/fancybox/jquery.easing-1.3.pack.js"></script>
    <script src="~/fancybox/jquery.fancybox-1.3.4.js"></script>
    <script src="~/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link href="~/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />


    <script>
        $(document).ready(function () {
            $("#domainOnlineOfflineList").fancybox();
        });

        $(function () {

            var conn;
            var rtc;
            var parameter;
            var currentContext;
            var localVideo = document.getElementById("localVideo");
            var remoteVideo = document.getElementById("remoteVideo");
            var startClick = false;
            var onlyOnce = true;
            var conf = false;



            if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) {

            } else {
                window.location.replace("Kabin1/Error");
            }

            //  conn = new XSockets.WebSocket('ws://212.146.135.107:4502/Kaabin');

            conn = new XSockets.WebSocket('ws://212.146.135.107:4502/Kaabin');





            //conn.on("kimlerOnline", function (user) {
            //  $("#" + user.name).html(user.status);
            //});

            conn.on(XSockets.Events.open, function (clientInfo) {



                rtc = new XSockets.WebRTC(conn);


                console.log('Conn', conn);
                console.log('Open', clientInfo);
                console.log('webRTC', rtc);



                //RTC BINDINGS!!
                rtc.bind(XSockets.WebRTC.Events.onContextCreated, function (ctx) {
                    conn.publish('kimlerOnline', { name: '@ViewBag.CurrentUser', status: 'true' });
                    console.log('OnContextCreated', ctx);
                    currentContext = ctx;
                });
                rtc.bind(XSockets.WebRTC.Events.onContextChange, function (ctx) {
                    console.log('OnContextChange', ctx[0]);
                    currentContext = ctx[0];
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionStarted, function (peer) {
                    console.log('OnPeerConnectionStarted', peer);
                    $('#logs').append("Bağlantı Başlatıldı " + peer[0].PeerID + "<br/>");
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionCreated, function (peer) {
                    console.log('OnPeerConnectionCreated', peer);
                    $('#logs').append("Bağlantı Oluştu " + peer[0].PeerID + "<br/>");
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionLost, function (peer) {
                    console.log('OnPeerConnectionLost', peer);
                    $('#logs').append("Bağlantı Koptu " + peer[0].PeerID + "<br/>");
                });
                rtc.bind(XSockets.WebRTC.Events.onlocalStream, function (stream) {

                    console.log("The local stream is avaliable, add it to a HTML5 Video element");
                    attachMediaStream(document.querySelector("#localVideo"), stream);

                });
                rtc.bind(XSockets.WebRTC.Events.onRemoteStream, function (event) {
                    attachMediaStream(remoteVideo, event.stream);
                });
                //END OF RTC BINDINGS!!

            });

            conn.on('kimlerOnline', function (data) {
                console.log('kimlerOnline', data);
                $("#" + data.name).html(data.status);
            });

            conn.on(XSockets.Events.onError, function (err) {
                console.log('Error', err);
            });
            conn.on(XSockets.Events.close, function () {
                conn.publish('kimlerOnline', { name: '@ViewBag.CurrentUser', status: 'Bağlantısı Kapandı' });
                console.log('Closed');
            });



            //EVENTS
            $("#start").fancybox({
                'href': '#domainOnlineOfflineList'
            });
            $("#start").click(function () {

       
                try {
                      rtc.getUserMedia({ "audio": true, "video": true },
                          function () {

                              console.log("Media OK!");
                              console.log('Context', currentContext);
                              rtc.changeContext(currentContext.Context);
                          },
                              function () {
                                  console.log("Media NOT OK!");
                                  //{ Response.Redirect("~/Kabin1/Error");}
                                  window.location.replace("Kabin1/SocketError");
                              }
                          );
                  } catch (err) {
                      window.location.replace("Kabin1/SocketError");
                  }
            });


        });
    </script>


    <div class="table-responsive" id="domainOnlineOfflineList">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Online Status</th>
                </tr>
            </thead>
            <tbody>

                @{ foreach (var item in Users)
                 {
                <tr>
                    <td>
                        @item.Value.name
                    </td>
                    <td id=" @item.Value.name ">
                        @item.Value.loginStatus
                    </td>
                </tr>
                 }
                }

            </tbody>
        </table>
    </div>


    <div id="logs"></div>
</body>
</html>
